<!-- 定义网页根元素为：HTML -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!-- 设置标头logo -->
		<link rel="icon" href="img/tyust_logo.png">
		<title>2019级冬毕业实习</title>
		
		<style>
			label {
				width: 100px;
				text-align: right;
				display: inline-block;
			}
			div {
				border: 1px solid black;
				margin: 5px auto;
				padding: 5px 20px;
			}
		</style>
	</head>
	<body>
		<!-- 表单 -->
		<div>
			<h2>表单</h2>
			<form action="tyust.html" method="get">
				<label for="username">用户名</label>
				<input type="text" id="username" placeholder="请输入用户名">
				<br>
				<label for="pwd">密码</label>
				<input type="password" id="pwd" placeholder="请输入密码">
				<br>
				<label for="birthday">生日</label>
				<input type="date" id="birthday">
				<br>
				<label>性别</label>
				<input type="radio" id="sex" name="gender">男
				<input type="radio" id="sex" name="gender">女
				<br>
				<label>籍贯</label>
				<select>
					<option>河南</option>
					<option>山西</option>
					<option>北京</option>
					<option>河北</option>
					<option>浙江</option>
                                                                                <option>安徽</option>
				</select>
				<br>
				<label>爱好</label>
				<input type="checkbox"/>乒乓球
				<input type="checkbox"/>篮球
				<input type="checkbox"/>唱跳rap
				<br>
				<label>照片</label>
				<input type="file"/>
				<br>
				<label>备注</label>
				<textarea rows="10" cols="50"></textarea>
				<br>
				<input type="submit" value="注册" />
				<input type="reset" value="重填" />
			</form>
		</div>
		<!-- 超链接 -->
		<div>
			<h2>超链接</h2>
			<a href="tyust.html">太原科技大学</a>
		</div>
		<!-- 图片 -->
		<div>
			<h2>图片</h2>
			<img src="./img/tyust_logo.png" width="100px" />
		</div>
		<!-- 表格 -->
		<div>
			<h2>表格</h2>
			<table border="1px" width="500px" style="text-align: center;">
				<tr>
					<td>车次</td>
					<td>出发站</td>
					<td>历时</td>
					<td>操作</td>
				</tr>
				<tr>
					<td>G3135</td>
					<td>太原南</td>
					<td>4h</td>
					<td>
						<button type="button">预定</button>
					</td>
				</tr>
				<tr>
					<td>G3135</td>
					<td>太原南</td>
					<td>4h</td>
					<td>
						<button type="button">预定</button>
					</td>
				</tr>
				<tr>
					<td>G3128</td>
					<td>太原南</td>
					<td>7h</td>
					<td>
						<button type="button">预定</button>
					</td>
				</tr>
			</table>
		</div>
		<!-- div使用 -->
		<div>
			<h2>div的使用</h2>
			<div style="background-color: aqua;width: 100px;height: 100px;">
				<span>我是div1</span>
			</div>
			<div style="background-color: red;width: 100px;height: 100px;">
				<input type="text" placeholder="请输入我是div2"/>
			</div>
			<div style="background-color: green;width: 100px;height: 100px;">
				<a href="#">我是div3</a>
			</div>
		</div>
		<!-- span使用 -->
		<div>
			<h2>span的使用</h2>
			<input type="text"/>
			<span>
				用户名不能为空
			</span>
		</div>
		<!-- 列表使用（ol:有序列表，1、2、...；ul:无序列表） -->
		<div>
			<h2>列表的使用</h2>
			<span>无序列表</span>
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
			<span>有序列表</span>
			<ol>
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ol>
		</div>
	</body>
</html>